<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="queryParams.courseName" placeholder="请输入课程名称" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="授课老师" prop="teacherName">
          <el-input v-model="queryParams.teacherName" placeholder="请输入授课老师" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="课程状态" prop="status">
          <el-select v-model="queryParams.courseStatus" placeholder="请选择课程状态" clearable style="width: 240px" >
            <el-option v-for="dict in courseStatusOptions" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="课程分类" prop="status">
          <el-select v-model="queryParams.courseCategory" placeholder="请选择课程分类" clearable style="width: 240px" >
            <el-option v-for="dict in courseCategoryOptions" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:course:add']" >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:course:edit']" >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleBatchDelete" v-hasPermi="['system:course:remove']" >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:course:export']" >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="courseList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="课程编号" prop="courseId" width="120" />
        <el-table-column label="课程名称" prop="courseName" :show-overflow-tooltip="true" width="150">
          <template slot-scope="scope">
            <a style="color: #1890ff;" :href="scope.row.courseLink" target="_blank" v-if="scope.row.courseLink">{{ scope.row.courseName }}</a>
            <span v-else>{{ scope.row.courseName }}</span>
          </template>
        </el-table-column> />
        <el-table-column label="授课老师" prop="teacherName" :show-overflow-tooltip="true" width="150" />
        <el-table-column label="课程分类" prop="courseCategory" :show-overflow-tooltip="true" width="150" />
        <el-table-column label="课程简介" prop="courseDesc" width="100" />
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)" ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="scope.row.courseId !== 1">
            <el-button size="mini" type="text"icon="el-icon-edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:course:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:course:edit']">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:course:edit']">数据权限</el-dropdown-item>
                <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:course:edit']">分配用户</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  
      <!-- 添加或修改课程配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="课程名称" prop="courseName">
            <el-input v-model="form.courseName" placeholder="请输入课程名称" />
          </el-form-item>
          <el-form-item label="课程链接" prop="courseLink">
            <el-input v-model="form.courseLink" placeholder="请输入课程链接" />
          </el-form-item>
          <el-form-item prop="teacherName">
            <span slot="label">
              <el-tooltip content="授课老师" placement="top"><i class="el-icon-question"></i></el-tooltip> 
              授课老师
            </span>
            <el-input v-model="form.teacherName" placeholder="请输入授课老师" />
          </el-form-item>
          <el-form-item label="课程分类" prop="courseCategory">
            <el-select v-model="form.courseCategory" placeholder="请选择课程分类"  style="width:100%">
              <el-option
                v-for="item in couseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程状态">
            <el-select v-model="form.courseStatus" placeholder="请选择课程状态"  style="width:100%">
              <el-option
                v-for="item in courseStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程描述">
            <el-input v-model="form.courseDesc" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
      <!-- 分配课程数据权限对话框 -->
      <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
        <el-form :model="form" label-width="80px">
          <el-form-item label="课程名称">
            <el-input v-model="form.courseName" :disabled="true" />
          </el-form-item>
          <el-form-item label="课程分类">
            <el-input v-model="form.courseKey" :disabled="true" />
          </el-form-item>
          <el-form-item label="课程章节">
            <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
              <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option></el-select>
          </el-form-item>
          <el-form-item label="数据权限" v-show="form.dataScope == 2">
            <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
            <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
            <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
            <el-tree
              class="tree-border"
              :data="deptOptions"
              show-checkbox
              default-expand-all
              ref="dept"
              node-key="id"
              :check-strictly="!form.deptCheckStrictly"
              empty-text="加载中，请稍候"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">确 定</el-button>
          <el-button @click="cancelDataScope">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  // import { listcourse, getcourse, delcourse, addcourse, updatecourse, dataScope, changecourseStatus, deptTreeSelect } from "@/api/system/course";
  import { getCourseList, addCourse,deleteCourse, batchDeleteCourse } from "@/api/biz/course";
  
  export default {
    name: "Course",
    dicts: ['sys_normal_disable'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程表格数据
        courseList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        // 日期范围
        dateRange: [],
        // 数据范围选项
        couseTypeOptions: [
          { value: "1", label: "考证升级" },
          { value: "2", label: "自我提升" },
          { value: "3", label: "名校课程" },
          { value: "4", label: "专业提升" },
          { value: "5", label: "艺术文化" }
        ],
        courseStatusOptions: [
          { value: "1", label: "待开课" },
          { value: "2", label: "进行中" },
          { value: "3", label: "已完结" },
          { value: "4", label: "待发布" }
        ],
        // 菜单列表
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          courseName: undefined,
          courseStatus: undefined,
          teacherName: undefined,
          courseCategory: undefined
        },
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 表单校验
        rules: {
          courseName: [
            { required: true, message: "课程名称不能为空", trigger: "blur" }
          ],
          courseStatus: [
            { required: true, message: "课程状态不能为空", trigger: "blur" }
          ],
          courseCategory: [
            { required: true, message: "课程分类不能为空", trigger: "blur" }
          ]
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询课程列表 */
      getList() {
        this.loading = true;
        getCourseList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.courseList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      // 课程状态修改
      handleStatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$modal.confirm('确认要"' + text + '""' + row.courseName + '"课程吗？').then(function() {
          return changecourseStatus(row.courseId, row.status);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮（数据权限）
      cancelDataScope() {
        this.openDataScope = false;
        this.reset();
      },
      // 表单重置
      reset() {
        if (this.$refs.menu != undefined) {
          this.$refs.menu.setCheckedKeys([]);
        }
        this.form = {
          courseId: undefined,
          courseName: undefined,
          courseKey: undefined,
          courseStatus: "4",
          courseDesc: undefined,
          courseCategory: undefined,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.courseId)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
    //   // 更多操作触发
    //   handleCommand(command, row) {
    //     switch (command) {
    //       case "handleDataScope":
    //         this.handleDataScope(row);
    //         break;
    //       case "handleAuthUser":
    //         this.handleAuthUser(row);
    //         break;
    //       default:
    //         break;
    //     }
    //   },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加课程";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const courseId = row.courseId || this.ids
        getCourseDetail(courseId).then(response => {
          this.form = response.data;
          this.open = true;
          this.$nextTick(() => {
            courseMenu.then(res => {
              let checkedKeys = res.checkedKeys
              checkedKeys.forEach((v) => {
                  this.$nextTick(()=>{
                      this.$refs.menu.setChecked(v, true ,false);
                  })
              })
            });
          });
          this.title = "修改课程";
        });
      },
      /** 选择课程权限范围触发 */
      dataScopeSelectChange(value) {
        if(value !== '2') {
          this.$refs.dept.setCheckedKeys([]);
        }
      },
      /** 分配数据权限操作 */
      handleDataScope(row) {
        // this.reset();
        // const deptTreeSelect = this.getDeptTree(row.courseId);
        // getcourse(row.courseId).then(response => {
        //   this.form = response.data;
        //   this.openDataScope = true;
        //   this.$nextTick(() => {
        //     deptTreeSelect.then(res => {
        //       this.$refs.dept.setCheckedKeys(res.checkedKeys);
        //     });
        //   });
        //   this.title = "分配数据权限";
        // });
      },
    //   /** 分配用户操作 */
    //   handleAuthUser: function(row) {
    //     const courseId = row.courseId;
    //     this.$router.push("/system/course-auth/user/" + courseId);
    //   },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          console.info(123, valid, this.form)
          if (valid) {
            if (this.form.courseId != undefined) {
              updatecourse(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addCourse(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
    //   /** 提交按钮（数据权限） */
    //   submitDataScope: function() {
    //     if (this.form.courseId != undefined) {
    //       this.form.deptIds = this.getDeptAllCheckedKeys();
    //       dataScope(this.form).then(response => {
    //         this.$modal.msgSuccess("修改成功");
    //         this.openDataScope = false;
    //         this.getList();
    //       });
    //     }
    //   },

      /** 删除按钮操作 */
      handleDelete(row) {
        console.info(123, row)
        const courseIds = row.courseId || this.ids;
        this.$modal.confirm('是否确认删除课程编号为"' + courseIds + '"的数据项？').then(function() {
          return deleteCourse(courseIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handleBatchDelete(){
        console.info(123, this.ids)
        batchDeleteCourse(this.ids).then(response => {
                console.info(333, response)
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
        });

      }
    //   /** 导出按钮操作 */
    //   handleExport() {
    //     this.download('system/course/export', {
    //       ...this.queryParams
    //     }, `course_${new Date().getTime()}.xlsx`)
    //   }
    }
  };
  </script>